<template>
  <div>
    <div style="text-align: center; margin-bottom: 10px">
      <span style="margin-right: 10px;display:inline-block;width: 90px;vertical-align:middle;">{{ capture }}</span>
      <el-radio-group v-model="scr" size="medium" @input="changeScore">
        <el-radio-button :label="0">0</el-radio-button>
        <el-radio-button :label="10">10</el-radio-button>
        <el-radio-button :label="20">20</el-radio-button>
        <el-radio-button :label="30">30</el-radio-button>
        <el-radio-button :label="40">40</el-radio-button>
        <el-radio-button :label="50">50</el-radio-button>
        <el-radio-button :label="60">60</el-radio-button>
        <el-radio-button :label="70">70</el-radio-button>
        <el-radio-button :label="80">80</el-radio-button>
        <el-radio-button :label="90">90</el-radio-button>
        <el-radio-button :label="100">100</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    score: {
      default: 0,
      type: Number
    },
    capture: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      scr: this.score
    }
  },
  methods: {
    changeScore(value) {
      this.$emit('update:score', value)
    }
  }
}
</script>

<style lang="scss" scoped></style>
